<template>
  <view class="main">
    <view :style="{ height: statusBarHeight + 'rpx' }"></view>
    <view class="custom-navbar">
      <view class="navbar-content">
        <view class="back-btn" @click="goBack">
          <image src="/static/images/newIndex/back.png"></image>
        </view>
        <view class="title">个人信息维护</view>
      </view>
    </view>
    <view class="mainBg"></view>
    <view class="main-container">
      <view class="inputCon" :class="{ 'error': errors.name }">
        <view>昵称</view>
        <input v-model="hospitalInfo.name" type="text" placeholder="输入昵称"
          placeholder-style="color: #CCD1D8; font-size: 30rpx;" 
          @blur="validateField('name')" />
      </view>
      <view class="error-msg" v-if="errors.name">{{ errors.name }}</view>
      
      <view class="inputCon" :class="{ 'error': errors.phone }">
        <view>手机号</view>
        <input v-model="hospitalInfo.phone" type="text" placeholder="请输入手机号" 
          placeholder-style="color: #CCD1D8;" 
          @blur="validateField('phone')" />
      </view>
      <view class="error-msg" v-if="errors.phone">{{ errors.phone }}</view>
      
      <view class="inputCon" :class="{ 'error': errors.email }">
        <view>邮箱</view>
        <input v-model="hospitalInfo.email" type="text" placeholder="请输入邮箱"
          placeholder-style="color: #CCD1D8;" 
          @blur="validateField('email')" />
      </view>
      <view class="error-msg" v-if="errors.email">{{ errors.email }}</view>
      
      <view class="inputCon" :class="{ 'error': errors.password }">
        <view>密码</view>
        <input v-model="hospitalInfo.password" type="password" placeholder="请输入密码" 
          placeholder-style="color: #CCD1D8;" 
          @blur="validateField('password')" />
      </view>
      <view class="error-msg" v-if="errors.password">{{ errors.password }}</view>
    </view>
    <tui-list-cell class="foot-ope">
      <tui-form-button @click="save()" height="2.6" radius="50px">确定</tui-form-button>
    </tui-list-cell>

    <tui-toast ref="toast"></tui-toast>
  </view>
</template>

<script>
import tuiFormButton from "@/components/thorui/tui-form-button/tui-form-button.vue";
import config from "../../common/config";

export default {
  components: {
    tuiFormButton,
  },
  data() {
    return {
      statusBarHeight: 0,
      hospitalInfo: {
        name: '',
        phone: '',
        email: '',
        password: ''
      },
      errors: {
        name: '',
        phone: '',
        email: '',
        password: ''
      },
      // 验证规则
      rules: {
        name: {
          required: true,
          message: '请输入昵称'
        },
        phone: {
          required: true,
          pattern: /^1[3-9]\d{9}$/,
          message: '请输入正确的手机号码'
        },
        email: {
          required: true,
          pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
          message: '请输入正确的邮箱地址'
        },
        password: {
          required: true,
          minLength: 6,
          message: '密码至少6位字符'
        }
      },

      uploaderHeader: {
        Authorization: `${uni.getStorageSync("thorui_token")}`,
      },
      fileUploadServerUrl: config.baseUrl + "/api/ajax/upload",

      status: false,
    };
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    
    // 验证单个字段
    validateField(field) {
      const rule = this.rules[field];
      const value = this.hospitalInfo[field];
      
      // 清除之前的错误信息
      this.errors[field] = '';
      
      // 必填验证
      if (rule.required && (!value || value.trim() === '')) {
        this.errors[field] = rule.message;
        return false;
      }
      
      // 正则验证
      if (rule.pattern && value && !rule.pattern.test(value)) {
        this.errors[field] = rule.message;
        return false;
      }
      
      // 最小长度验证
      if (rule.minLength && value && value.length < rule.minLength) {
        this.errors[field] = rule.message;
        return false;
      }
      
      return true;
    },
    
    // 验证所有字段
    validateForm() {
      let isValid = true;
      
      // 验证所有字段
      Object.keys(this.rules).forEach(field => {
        if (!this.validateField(field)) {
          isValid = false;
        }
      });
      
      return isValid;
    },
    
    // 清除所有错误信息
    clearErrors() {
      Object.keys(this.errors).forEach(key => {
        this.errors[key] = '';
      });
    },
    
    imageRemove(e) {
      this.hospitalInfo.image = [];
    },
    imageComplete(e) {
      this.hospitalInfo.image = e.imgArr;
    },

    statusChange(e) {
      if (e.detail.value == false) {
        this.hospitalInfo.status = "hidden";
      } else {
        this.hospitalInfo.status = "normal";
      }
    },

    save() {
      // 验证表单
      if (!this.validateForm()) {
        uni.showToast({
          title: '请检查输入信息',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      // 表单验证通过，提交数据
      this.http
        .post("/api/hospital/add", {
          data: this.hospitalInfo,
        })
        .then((res) => {
          if (res.data.code == 1) {
            let params = {
              title: res.data.msg,
              imgUrl: "/static/images/toast/check-circle.png",
              icon: true,
            };
            this.$refs.toast && this.$refs.toast.show(params);

            setTimeout(() => {
              uni.navigateBack();
            }, 2000);
          } else {
            let params = {
              title: res.data.msg,
              imgUrl: "/static/images/toast/fail-circle.png",
              icon: true,
            };
            this.$refs.toast && this.$refs.toast.show(params);

            setTimeout(() => {
              uni.navigateBack();
            }, 2000);
          }
        })
        .catch((err) => { 
          uni.showToast({
            title: '提交失败，请重试',
            icon: 'none',
            duration: 2000
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/style/thorui-extend.css";

.main {
  background: rgba(235, 239, 244, 1);
  height: calc(100vh - 155rpx);
  overflow: hidden;
  position: relative;
  padding-top: 155rpx;
}

.custom-navbar {
  position: fixed;
  top: 90rpx;
  left: 0;
  right: 0;
  z-index: 999;
}

.navbar-content {
  display: flex;
  align-items: center;
  height: 44px;
  /* 导航栏高度 */
  padding: 0 15px;
}

.back-btn {
  image {
    width: 48rpx;
    height: 48rpx;
  }
}

.title {
  flex: 1;
  font-weight: 500;
  font-size: 32rpx;
  color: #ffffff;
  text-align: center;
}

.mainBg {
  background-image: url("/static/images/newIndex/index_bg.png") !important;
  background-size: 100% 100%;
  width: 100%;
  height: 692rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.main-container {
  background: #fff;
  border-radius: 20rpx;
  padding: 36rpx 32rpx;
  width: calc(95% - 70rpx);
  margin: 44rpx auto 20rpx;
  position: relative;
  z-index: 1;
}

.inputCon {
  display: flex;
  align-items: center;
  gap: 30rpx;
  border-bottom: solid 1px rgba(245, 245, 245, 1);
  padding-bottom: 20rpx;
  margin-bottom: 25rpx;

  view {
    width: 220rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #8e8f9b;
  }

  input {
    flex: 1;
    border: none;
    text-align: right;
    font-weight: 400;
    font-size: 30rpx;
    color: #333333;
  }

  &:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  
  // 错误状态样式
  &.error {
    border-bottom-color: #ff4757;
    
    input {
      color: #ff4757;
    }
  }
}

// 错误信息样式
.error-msg {
  color: #ff4757;
  font-size: 24rpx;
  margin-top: -20rpx;
  margin-bottom: 20rpx;
  margin-left: 250rpx;
  text-align: right;
}

.foot-ope {
  position: fixed;
  width: 100vw;
  bottom: 0;
  left: 0;
}
</style>
